<template>
  <div id="app" >
    <div class="container" @keydown.stop="handleKeydown($event)" tabindex=1>
      <div class="header">2048</div>

      <div class="cell_container">
          <div v-for="(item,index) in cellNumList" 
            :class="'cell'+' '+'cell'+Math.floor((item-1)/4+1)+((item-1)%4+1)" 
            :key="index"
          >
          <transition name="fade">
            <span v-show="item">{{item}} </span>
          </transition>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data(){
    return{
      cellNumList: Array(16),
    }
  },  
  methods:{
    handleKeydown(e){
      switch(e.keyCode){
        case 37:
          this.left();
          break;
        case 38:
          this.up();
          break;
        case 39:
          this.right();
          break;
        case 40:
          this.down();
          break;
        default: break;
      };
      //console.log(e);
    },
    up(){

      this.generateNew()
      console.log('up');
    },
    down(){
      this.generateTwoNumbers()
      console.log('down');
    },
    left(){
      console.log('left');
    },
    right(){
      console.log('right');
    },
    generateNew(){
      let count = 0
      for(let i=0;i<this.cellNumList.length;i++){
        if (!this.cellNumList[i]) {
          count++
        }
      }
      if (count>2) {
        Math.random() < 0.5 ? this.generateOneNumber():this.generateTwoNumbers()
      }else if(count === 0){
        console.log('gameover');
      }
      else{
        this.generateOneNumber()
      }
    },
    generateOneNumber(){
      let generate = Math.random() < 0.6 ? 2 : 4
      let randIndex1
      while(true){
        randIndex1 = Math.floor( Math.random() * 16 )
        if (!this.cellNumList[randIndex1]) {
          break;
        }
      }
      // let randIndex2 = Math.floor( Math.random() * 16 )
      this.cellNumList.splice(randIndex1,1,generate)
    },
    generateTwoNumbers(){
      let generate1 = Math.random() < 0.6 ? 2 : 4
      let generate2 = Math.random() < 0.6 ? 2 : 4
      let i1, i2;
      while(true){
        i1 = Math.floor( Math.random() * 16 )
        i2 = Math.floor( Math.random() * 16 )
        if ( (i1!==i2) && !this.cellNumList[i1] && !this.cellNumList[i2]) {
          break;
        }
      }
      this.cellNumList.splice(i1,1,generate1)
      this.cellNumList.splice(i2,1,generate2)
    }
  },
  created(){
    // for (let i =0;i<this.cellNumList.length;i++){
    //   console.log(i);
    //   this.cellNumList[i]= -1
    // }
    this.generateTwoNumbers()
  }
}
</script>

<style lang="scss">
.container{
  margin:0 auto;
}
div{
  outline: none;
}
#app{
  text-align: center;
  width: 100%;
}
.header{
  width: 384px;
  text-align: center;
  background: lightcoral;
  border-radius: 10px 10px 0 0;
}
.cell{
  display: block;
  font-size: 60px;
  line-height: 80px;
  margin: 8px;
  width: 80px;
  height: 80px;
  float: left;
  background: lightblue;
  border-radius: 10px;
}
.cell_container{
  width: 384px;
  height:384px;
  background: lightcoral;
  border-radius: 0 0 10px 10px;
}

.fade-enter-active, .fade-leave-active{
  transition: opacity 1.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

</style>